<template>
    <div class="goodsindex">
        <!-- 搜索条件 -->
        <el-row :gutter="20" class="goodsindex-queryInfo">
            <!-- 商品名称搜索 -->
            <el-col :xs="8" :sm="6" :md="6" :lg="4" :xl="4">
                <el-input class="goodsindex-queryInfo-li" v-model="queryInfo.name" clearable size="small" placeholder="请输入产品名称"></el-input>
            </el-col>
            <!-- 商品分类搜索 -->
            <el-col :xs="8" :sm="6" :md="6" :lg="4" :xl="4">
                 <el-select  class="goodsindex-queryInfo-li" v-model="queryInfo.type" size="small" clearable placeholder="请选择产品分类">
                    <el-option
                    v-for="items in classify"
                    :key="items.id"
                    :label="items.name"
                    :value="items.name">
                    </el-option>
                </el-select>
            </el-col>
            <el-col :xs="6" :sm="4" :md="3" :lg="2" :xl="2">
                <el-button type="primary" class="goodsindex-queryInfo-li" size="small" @click="searchGood">搜索</el-button>
            </el-col>
            <el-col :xs="6" :sm="4" :md="3" :lg="2" :xl="2">
                <el-button type="success" class="goodsindex-queryInfo-li" size="small" @click="addFromGood">添加</el-button>
            </el-col>
        </el-row>
        <!-- 检索结果 -->
        <el-row :gutter="20" class="goodsindex-list">
            <el-col :span="24">
                <el-table
                    :data="tableData"
                    border
                    size='small'
                    style="width: 100%">
                    <el-table-column
                    type="index"
                    label="序号"
                    width="50">
                    </el-table-column>
                    <el-table-column
                    prop="id"
                    label="产品ID"
                    width="60">
                    </el-table-column>
                    <el-table-column
                    prop="name"
                    label="产品名称"
                    width="120">
                    </el-table-column>
                    <el-table-column label="产品图片">
                    　　<template slot-scope="scope">
                          <el-popover placement="top-start" trigger="click"> <!--trigger属性值：hover、click、focus 和 manual-->
                            <a :href="scope.row.img" target="_blank" title="查看最大化图片">
                              <img :src="scope.row.img" width="500">
                            </a>
                            <img slot="reference" :src="scope.row.img" height="100" style="cursor:pointer">
                          </el-popover>
                    　　</template>
                    </el-table-column>
                    <el-table-column
                    prop="content"
                    label="产品描述"
                    width="180">
                    </el-table-column>
                    <el-table-column
                    prop="money"
                    label="产品价格(元)"
                    width="100">
                    </el-table-column>
                    <el-table-column
                    prop="totel"
                    label="总量(件)"
                    width="80">
                    </el-table-column>
                    <el-table-column
                    prop="classify_name"
                    label="所属分类"
                    width="100">
                    </el-table-column>
                    <el-table-column
                    prop="create_time_temp"
                    label="最初创建时间"
                    width="120">
                    </el-table-column>
                    <el-table-column
                    prop="update_time_temp"
                    label="最后修改时间"
                    width="120">
                    </el-table-column>
                    <el-table-column label="操作">
                      　　<template slot-scope="scope">
                              <el-button type="primary" class="one_buttom" size="small" @click="updateGood(scope.row.id)">编辑</el-button>
                              <el-button type="danger" class="one_buttom" size="small" @click="deleteGood(scope.row.id)">删除</el-button>
                      　　</template>
                    </el-table-column>
                </el-table>
            </el-col>
        </el-row>
        <!-- 分页 -->
        <el-row :gutter="20" class="goodsindex-list">
            <el-col :span="24" class="goodsindex-page-box">
                <el-pagination
                    :hide-on-single-page="false"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="queryInfo.page"
                    :page-sizes="[10, 20, 50, 100]"
                    :page-size="queryInfo.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="queryInfo.totalNum">
                </el-pagination>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import {getClassify, goods, searchgoods, deleteGood} from "@/http/api";
import {Message} from "element-ui";

export default {
  created() {
    this.getgoods();
    this.getClassify();
  },
  data(){
        return {
            queryInfo:{
                name: '',
                type: '',
                page: 1,
                pageSize: 10,
                totalNum: 0
            },
            //搜索
            classify: [],
            //展示
            tableData: [],
            tableData_temp: []
        }
    },
    methods:{
        getgoods(){
          goods().then(res => {
            console.log(res);
            // console.log(res.message);
            this.tableData = res.goods;
            this.tableData_temp = res.goods;
            this.queryInfo.totalNum = res.goods.length;
            this.handleCurrentChange(1);
          });
        },
        getClassify(){
          getClassify().then(res => {
            console.log(res);
            this.classify = res.classify;
          });
        },
        handleSizeChange(size){
          this.queryInfo.pageSize = size;
          this.handleCurrentChange(this.queryInfo.page);
        },
        handleCurrentChange(current){
          this.queryInfo.page = current;
          this.currentChangePage(this.tableData_temp,current)
        },
        //分页方法（重点）
        currentChangePage(list,currentPage) {
          let from = (currentPage - 1) * this.queryInfo.pageSize;
          let to = currentPage * this.queryInfo.pageSize;
          this.tempList = [];
          for (; from < to; from++) {
            if (list[from]) {
              this.tempList.push(list[from]);
            }
          }
          this.tableData = this.tempList;
        },
        searchGood(){
          const params = {
            name: this.queryInfo.name,
            classify: this.queryInfo.type
          };
          if (params.name==="" && params.classify!==""){
            params.name="no";
          }else if (params.classify==="" && params.name!==""){
            params.classify="no";
          }else if (params.name==="" && params.classify===""){
            this.getgoods();
            return false;
          }
          searchgoods(params).then(res => {
            console.log(res);
            this.tableData = res.goods;
            this.tableData_temp = res.goods;
            this.queryInfo.totalNum = res.goods.length;
            this.handleCurrentChange(1);
          });
        },
        addFromGood(){
          // this.$router.push('/goods/fromgood')
          this.$router.push({
            name: 'fromgood',
            params: {
              id: 0
            }
          })
        },
        updateGood(id){
          this.$router.push({
            name: 'fromgood',
            params: {
              id: id
            }
          })
        },
        deleteGood(id){
          const params = {
            id: id,
          };
          deleteGood(params).then(res => {
            console.log(res);
            Message({
              message: '操作成功！',
              type: 'success',
              duration: 5*1000
            })
            this.getgoods();
          });
        },
    }
}
</script>

<style scoped>
.goodsindex{
    width: 100%;
    min-height: 100%;
    padding: 15px;
    box-sizing: border-box;
}
/* 搜索 */
.goodsindex-queryInfo{
    margin-bottom: 10px;
}
.goodsindex-queryInfo-li{
    width: 100%;
    height: auto;
}
/* 列表 */
.goodsindex-list{
    width: 100%;
    height: auto;
    margin-bottom: 20px;
}
.one_buttom{
  width: 40%;
  margin-left: 7%;
}
/* 分页 */
.goodsindex-page-box{
    width: 100%;
    height: auto;
    display: flex;
    justify-content: flex-end;
}
</style>